<template>
  <div class="cart_item">
      <img width="150" :src=this.item_img alt="" srcset="">
      <div class="right">
        <div class="p1 flex">
          <div>
            <p class="p1">{{this.item_title}}</p>
            <!-- <p class="description p1">{{this.item_desc.length > 60 ? this.item_desc.substr(0,60)+'...':this.item_desc}}</p> -->
          </div>
<!--          <img style="height: 1.5rem;" :src="require('../assets/delete.png')"
									@click="delItem(index)" /> -->
        </div>
        <p class="p1 moneyNumber">
          <span class="money" style="color:#EC4228">{{this.item_price}}</span>
          <van-field name="stepper" >
            <template #input>
              <van-stepper v-model="value" @change="change"/>
            </template>
          </van-field>
        </p>
      </div>
  </div>
</template>
<script>
	export default {
		data() {
			return {
				value: 0,
			}
		},
		props:['item_img','item_title','item_desc','item_price'],
		methods: {
			change(val) {
        console.log(val)
      },
      delItem(index) {
        console.log(index)
      }
		}
	}
</script>
<style scoped lang="less">
.cart_item {
  width: 100vw;
  height:300px;
  // border:solid 1px red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:20px;
  box-sizing: border-box;
}
.right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // padding-left: 10px;
  font-family: 'PingFang SC';
  font-size: 1rem;
  padding:10px;
  box-sizing: border-box;
}
.p1 {
  margin:0;
  padding:0;
}
.money {
  font-size: 1.1rem;
  font-family: 'PingFang SC';
  color: #EC4228;
}
.moneyNumber {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.description {
  padding-top: 30px;
  font-size: 0.8rem;
  // width: 100px;
  width:250px;
  // border: solid 1px red;
}
:deep(.van-field__control--custom) {
    display: flex;
    justify-content: flex-end;
    zoom:1.5;
}
:deep(.van-stepper__input) {
    width: 30px;
}
:deep(.van-cell) {
   background-color: transparent;
}
.flex {
  display: flex;
}
</style>